<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>随手快递</title>
    <link rel="stylesheet" type="text/css" href="../../AUI/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../font-awesome/css/font-awesome.min.css" />
    <style type="text/css">
        .user-info {
            background-color: #ffffff;
            padding: 0.75rem 0;
        }
        img.avatar {
            display: block;
            margin: 0 auto;
            width: 20%;
        }
        .aui-list .aui-list-header {
            background-color: #ffffff;
            line-height: 1.2rem;
        }
    </style>
</head>
<body style="font-family: 微软雅黑">
<header class="aui-bar aui-bar-nav" id="aui-header" >
    <a class="aui-btn aui-pull-left" tapmode onclick="history.back();">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">个人资料</div>
</header>
<section class="aui-content user-info aui-text-center aui-margin-b-15" style="margin-top: 45px;background: url('../../myImage/3.jpg') no-repeat;background-size:100% 100%">
    <img src="../../myImage/5.png" class="avatar aui-img-round">
    <h2 class="aui-margin-t-15">胖子 <small><i class="aui-iconfont aui-icon-my aui-text-danger"></i></small></h2>
    <div class="aui-margin-t-15" >
        信誉分：<span>1000</span> <span class="fa fa-star" style="color: #FFC107"></span>
    </div>
</section>
<section class="aui-content" >
    <ul class="aui-list aui-list-noborder" >
        <li class="aui-list-item"  >
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">地区：</div>
                <div class="aui-list-item-text">杭州</div>
            </div>
        </li>
        <li class="aui-list-item" >
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">个性签名：</div>
            </div>
            <div class="aui-list-item-text" style="padding: 5px 0">个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名</div>
        </li>
    </ul>
</section>


<p id="show" style="display: none"></p>
<div id="wrapper">
    <div id="scroller">
        <div id="pullDown">
            <span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
        </div>
        <div id="thelist" style="margin: 0px 10px;padding: 20px 0">
            <div class="aui-card-list">
                <div class="aui-card-list-header aui-card-list-user">
                    <div class="aui-card-list-user-avatar">
                        <img src="../../myImage/5.png" class="aui-img-round">
                    </div>
                    <div class="aui-card-list-user-name">
                        <div class="aui-text-info">胖子</div>
                        <div class="aui-font-size-14 text-light">#房地产圈</div>
                    </div>
                    <div class="aui-card-list-user-info text-light">31分钟前</div>
                </div>
                <div class="aui-card-list-content-padded aui-padded-t-5 aui-padded-b-5">
                    近日，俄军最高统帅部组织了第五届全军炮兵旅预备队实地演练，出动了大批重型火炮，其中就包括当今口径最大的自行迫击炮——2S4“郁金香”240毫米自行迫击炮。本图集就此解读。
                </div>
                <div class="aui-card-list-content">
                    <div class="aui-row aui-row-padded">
                        <div class="aui-col-xs-4">
                            <img src="../../myImage/l1.png">
                        </div>
                        <div class="aui-col-xs-4">
                            <img src="../../myImage/l1.png">
                        </div>
                        <div class="aui-col-xs-4">
                            <img src="../../myImage/l1.png">
                        </div>
                    </div>
                </div>
                <div class="aui-card-list-footer text-light aui-font-size-14">

                    <div>
                        <i class="aui-iconfont aui-icon-comment"></i> 666
                    </div>
                    <div>
                        <i class="aui-iconfont aui-icon-laud"></i> 888
                    </div>
                </div>
            </div>
            <div class="aui-card-list">
                <div class="aui-card-list-header aui-card-list-user">
                    <div class="aui-card-list-user-avatar">
                        <img src="../../myImage/5.png" class="aui-img-round">
                    </div>
                    <div class="aui-card-list-user-name">
                        <div class="aui-text-info">胖子</div>
                        <div class="aui-font-size-14 text-light">#房地产圈</div>
                    </div>
                    <div class="aui-card-list-user-info text-light">31分钟前</div>
                </div>
                <div class="aui-card-list-content-padded aui-padded-t-5 aui-padded-b-5">
                    近日，俄军最高统帅部组织了第五届全军炮兵旅预备队实地演练，出动了大批重型火炮，其中就包括当今口径最大的自行迫击炮——2S4“郁金香”240毫米自行迫击炮。本图集就此解读。
                </div>
                <div class="aui-card-list-content">
                    <div class="aui-row aui-row-padded">
                        <div class="aui-col-xs-12">
                            <img src="../../myImage/l2.png">
                        </div>
                    </div>
                </div>
                <div class="aui-card-list-footer text-light aui-font-size-14">

                    <div>
                        <i class="aui-iconfont aui-icon-comment"></i> 666
                    </div>
                    <div>
                        <i class="aui-iconfont aui-icon-laud"></i> 888
                    </div>
                </div>
            </div>

        </div>
        <div id="pullUp" style="display:none;" >
            <span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../../AUI/script/api.js" ></script>
<script src="../../myJs/jquery.js"></script>
<script src="../../myJs/jquery.cookie.js"></script>
<script type="text/javascript" src="../../AUI/script/aui-tab.js" ></script>
<script type="text/javascript" src="../../myJs/iscroll.js" ></script>
<script type="text/javascript" src="../../AUI/script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../myJs/index.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    }

</script>
<script type="text/javascript">

    var myScroll,
            pullDownEl,
            pullDownOffset,
            pullUpEl,
            pullUpOffset,
            generatedCount = 0;

    function pullDownAction () {
        setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
            var el, newnode, i;
            el = document.getElementById('thelist');

            for (i=0; i<2; i++) {
                newnode = document.createElement('div');
                newnode.innerHTML=' <div class="aui-card-list">\
                    <div class="aui-card-list-header aui-card-list-user">\
                    <div class="aui-card-list-user-avatar">\
                    <img src="../../myImage/5.png" class="aui-img-round">\
                    </div>\
                    <div class="aui-card-list-user-name">\
                    <div class="aui-text-info">胖子</div>\
                    <div class="aui-font-size-14 text-light">#房地产圈</div>\
                </div>\
                <div class="aui-card-list-user-info text-light">31分钟前</div>\
                </div>\
                <div class="aui-card-list-content-padded aui-padded-t-5 aui-padded-b-5">\
                    近日，俄军最高统帅部组织了第五届全军炮兵旅预备队实地演练，出动了大批重型火炮，其中就包括当今口径最大的自行迫击炮——2S4“郁金香”240毫米自行迫击炮。本图集就此解读。\
            </div>\
                <div class="aui-card-list-content">\
                    <div class="aui-row aui-row-padded">\
                    <div class="aui-col-xs-12">\
                    <img src="../../myImage/l2.png">\
                    </div>\
                    </div>\
                    </div>\
                    <div class="aui-card-list-footer text-light aui-font-size-14">\
                    <div>\
                    <i class="aui-iconfont aui-icon-comment"></i> 666\
                    </div>\
                    <div>\
                    <i class="aui-iconfont aui-icon-laud"></i> 888\
                    </div>\
                    </div>\
                    </div>';


                el.insertBefore(newnode, el.childNodes[0]);
            }
            document.getElementById("pullUp").style.display="";
            myScroll.refresh();
        }, 1000);
    }

    function pullUpAction () {
        setTimeout(function () {
            var el, newnode, i;
            el = document.getElementById('thelist');

            for (i=0; i<2; i++) {
                newnode = document.createElement('div');
                newnode.innerHTML=' <div class="aui-card-list">\
                    <div class="aui-card-list-header aui-card-list-user">\
                    <div class="aui-card-list-user-avatar">\
                    <img src="../../myImage/5.png" class="aui-img-round">\
                    </div>\
                    <div class="aui-card-list-user-name">\
                    <div class="aui-text-info">胖子</div>\
                    <div class="aui-font-size-14 text-light">#房地产圈</div>\
                </div>\
                <div class="aui-card-list-user-info text-light">31分钟前</div>\
                </div>\
                <div class="aui-card-list-content-padded aui-padded-t-5 aui-padded-b-5">\
                    近日，俄军最高统帅部组织了第五届全军炮兵旅预备队实地演练，出动了大批重型火炮，其中就包括当今口径最大的自行迫击炮——2S4“郁金香”240毫米自行迫击炮。本图集就此解读。\
            </div>\
                <div class="aui-card-list-content">\
                    <div class="aui-row aui-row-padded">\
                    <div class="aui-col-xs-12">\
                    <img src="../../myImage/l2.png">\
                    </div>\
                    </div>\
                    </div>\
                    <div class="aui-card-list-footer text-light aui-font-size-14">\
                    <div>\
                    <i class="aui-iconfont aui-icon-comment"></i> 666\
                    </div>\
                    <div>\
                    <i class="aui-iconfont aui-icon-laud"></i> 888\
                    </div>\
                    </div>\
                    </div>';

                el.appendChild(newnode, el.childNodes[0]);
            }
            myScroll.refresh();
        }, 1000);
    }

    function loaded() {
        pullDownEl = document.getElementById('pullDown');
        pullDownOffset = pullDownEl.offsetHeight;
        pullUpEl = document.getElementById('pullUp');
        pullUpOffset = 10;
        //pullUpOffset = pullUpEl.offsetHeight;
        myScroll = new iScroll('wrapper', {
            useTransition: true,
            topOffset: pullDownOffset,
            onRefresh: function () {
                //that.maxScrollY = that.wrapperH - that.scrollerH + that.minScrollY;
                //that.minScrollY = -that.options.topOffset || 0;
                //alert(this.wrapperH);
                //alert(this.scrollerH);
                if (pullDownEl.className.match('loading')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';}
                if (pullUpEl.className.match('loading')) {
                    pullUpEl.className = '';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                }

                document.getElementById("pullUp").style.display="none";
                document.getElementById("show").innerHTML="onRefresh: up["+pullUpEl.className+"],down["+pullDownEl.className+"],Y["+this.y+"],maxScrollY["+this.maxScrollY+"],minScrollY["+this.minScrollY+"],scrollerH["+this.scrollerH+"],wrapperH["+this.wrapperH+"]";
            },
            onScrollMove: function () {
                document.getElementById("show").innerHTML="onScrollMove: up["+pullUpEl.className+"],down["+pullDownEl.className+"],Y["+this.y+"],maxScrollY["+this.maxScrollY+"],minScrollY["+this.minScrollY+"],scrollerH["+this.scrollerH+"],wrapperH["+this.wrapperH+"]";
                if (this.y > 0) {
                    pullDownEl.className = 'flip';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                    this.minScrollY = 0;
                }
                if (this.y < 0 && pullDownEl.className.match('flip')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                    this.minScrollY = -pullDownOffset;
                }

                if ( this.scrollerH < this.wrapperH && this.y < (this.minScrollY-pullUpOffset) || this.scrollerH > this.wrapperH && this.y < (this.maxScrollY - pullUpOffset) ) {
                    document.getElementById("pullUp").style.display="";
                    pullUpEl.className = 'flip';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
                }
                if (this.scrollerH < this.wrapperH && this.y > (this.minScrollY-pullUpOffset) && pullUpEl.className.match('flip') || this.scrollerH > this.wrapperH && this.y > (this.maxScrollY - pullUpOffset) && pullUpEl.className.match('flip')) {
                    document.getElementById("pullUp").style.display="none";
                    pullUpEl.className = '';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                }
            },
            onScrollEnd: function () {
                document.getElementById("show").innerHTML="onScrollEnd: up["+pullUpEl.className+"],down["+pullDownEl.className+"],Y["+this.y+"],maxScrollY["+this.maxScrollY+"],minScrollY["+this.minScrollY+"],scrollerH["+this.scrollerH+"],wrapperH["+this.wrapperH+"]";
                if (pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'loading';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
                    pullDownAction();	// Execute custom function (ajax call?)
                }
                if (pullUpEl.className.match('flip')) {
                    pullUpEl.className = 'loading';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
                    pullUpAction();	// Execute custom function (ajax call?)
                }
            }
        });

        //setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>

</html>